<template>
    <div class="login">
        <div class="login_popup">
            <div v-if="left_flag">
                <img width="800" src="../assets/login_left-87c63f1f.png" alt="">
            </div>

            <div class="login_form">
                <div>
                    <div class="header">
                        <h2>灵图山数据统计系统</h2>
                    </div>

                    <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
                        autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                        <a-form-item label="" name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
                            <a-input v-model:value="formState.username" placeholder="请输入用户名" />
                        </a-form-item>

                        <a-form-item label="" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
                            <a-input-password v-model:value="formState.password" placeholder="请输入密码" />
                        </a-form-item>
                        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                            <a-button type="primary" html-type="submit">登录</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
        </div>


    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { corsApi } from '../request/http';
const router = useRouter()
interface FormState {
    username: string;
    password: string;
    remember: boolean;
}
const formState = reactive<FormState>({
    username: '',
    password: '',
    remember: true,
});
const onFinish = async (values: any) => { 
    console.log('Success:', values);
    const res = await corsApi('/console/login', 'post', {
        username: formState.username,
        password: formState.password,
        code: 'adjhq'
    })
    console.log(res);
    if (res.data.status === 1) {
        let data = res.data.result
        localStorage.setItem('username', data.username)
        localStorage.setItem('user_id', data.user_id)
        localStorage.setItem('token', data.token)

        router.push('/')
    }


};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

const left_flag = ref(true)

onMounted(() => {


    document.body.addEventListener('resize', (e) => {
        console.log(e);

        // let w = document.body.clientWidth
        // if (w < 1380) {
        //     left_flag.value = false

        // } else {
        //     left_flag.value = true
        // }
    })
})




</script>

<style scoped lang="scss">
.login {
    background-color: #eee;
    min-height: 550px;
    width: 100%;
    height: 100%;
    background-image: url(../assets/login_bg-05f3b32a.svg);
    background-size: cover;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    &_popup {
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 96.5%;
        height: 94%;
        padding: 0 50px;
        background-color: #fffc;
        border-radius: 10px;
    }

    &_form {
        width: 420px;
        padding: 50px 40px 45px;

        border-radius: 10px;
        box-shadow: #0000001a 0 2px 10px 2px;

        :deep(.ant-form-item-control) {
            width: 100%;
        }

        :deep(.ant-input-password) {
            width: 340px;
        }

        input {
            width: 340px;
        }

        .header {
            font-size: 24px;
        }
    }
}
</style>

